vue-demi

What is vue-demi?

The vue-demi package is a utility that enables library authors to publish their libraries for both Vue 2 and Vue 3 with a single codebase. It provides a set of APIs that are compatible with both versions of Vue, allowing for seamless integration and use in projects that may be using either version.

What are vue-demi's main functionalities?

Unified Vue Hooks

vue-demi provides a way to detect the version of Vue being used and allows you to conditionally execute code based on the version. This is useful for handling differences in the Vue lifecycle hooks or other version-specific features.

import { isVue2, isVue3, Vue2, Vue3 } from 'vue-demi'

if (isVue2) {
  // Vue 2 specific logic
} else if (isVue3) {
  // Vue 3 specific logic
}

Reactive API

vue-demi exports the reactive composition API that is consistent across Vue 2 and Vue 3. This allows developers to use the reactive system without worrying about the underlying Vue version.

import { ref, reactive } from 'vue-demi'

const count = ref(0)
const state = reactive({ name: 'Vue' })

Effect API

vue-demi provides the effect function which is part of the reactivity system in Vue 3 and is made available for Vue 2 through this package. It allows you to run side effects when reactive data changes.

import { effect } from 'vue-demi'

effect(() => {
  console.log('This will run when reactive state changes')
})

Other packages similar to vue-demi

@vue/composition-api

This package is a plugin for Vue 2 that provides the Vue 3 Composition API. It is similar to vue-demi in that it allows developers to use Vue 3 features in Vue 2 applications, but it does not provide the same automatic compatibility layer for libraries to support both Vue 2 and Vue 3.

vue2-helpers

vue2-helpers is a set of helper functions for Vue 2 that aim to bring some of the Vue 3 functionality to Vue 2. While it provides similar bridging functionality, it is not as comprehensive as vue-demi and is more focused on specific helpers rather than a full compatibility layer.

README

Vue Demi (half in French) is a developing utility
allows you to write Universal Vue Libraries for Vue 2 & 3
See more details in this blog post

Usage

Install this as your plugin's dependency:

npm i vue-demi
# or
yarn add vue-demi

Add vue and @vue/composition-api to your plugin's peer dependencies to specify what versions you support.

{
  "dependencies": {
    "vue-demi": "latest"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-beta.1",
    "vue": "^2.0.0 || >=3.0.0-rc.0"
  }
}

Import everything related to Vue from it, it will redirect to vue@2 + @vue/composition-api or vue@3 based on users' environments.

import { ref, reactive, defineComponent } from 'vue-demi'

Publish your plugin and all is done!

Extra APIs

Vue Demi provides extra APIs isVue2 and isVue3 to help distinguishing users' environments and to do some version specific logics.

import { isVue2 } from 'vue-demi'

if (isVue2) {
  // Vue 2 only
} else {
  // Vue 3 only
}

Examples

See examples.

Who are using this?

• VueUse - Collection of Composition API utils
• @vue/apollo-composable - Apollo GraphQL functions for Vue Composition API
• vuelidate - Simple, lightweight model-based validation
• vue-composition-test-utils - Simple vue composition api unit test utilities

open a PR to add your library ;)

Underhood

See the blog post.

Redirecting Reslove

If the script doesn't get triggered or you have updated the Vue version, try to run the following command to resolve the redirecting.

npx vue-demi-fix

License

MIT License © 2020 Anthony Fu